<template>
  <div class="page-container">
    <div class="common-content">
      <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
      <div class="search-wrap">
        <el-form
          :inline="true"
          :model="searchFilters"
          :size="searchSize"
          ref="searchFilters"
          label-position="right"
        >
          <el-row class="search-input">
            <el-form-item label="仓库：">
              <el-input v-model="searchFilters.name" placeholder="请输入仓库编码或仓库名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="商品：">
              <el-input v-model="searchFilters.productName" placeholder="请输入商品编码或商品名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="总库存：">
              <el-col :span="10">
                <el-input v-model="searchFilters.totalMin" clearable placeholder="总库存(最小值)"></el-input>
              </el-col>
              <el-col :span="4" class="text-align">-</el-col>
              <el-col :span="10">
                <el-input v-model="searchFilters.totalMax" clearable placeholder="总库存(最大值)"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="可售库存：">
              <el-col :span="10">
                <el-input v-model="searchFilters.availableMin" clearable placeholder="可售库存(最小值)"></el-input>
              </el-col>
              <el-col :span="4" class="text-align">-</el-col>
              <el-col :span="10">
                <el-input v-model="searchFilters.availableMax" clearable placeholder="可售库存(最大值)"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="商家" prop="merchantId" label-width="54px">
              <el-select v-model="searchFilters.merchantId" placeholder="全部" clearable>
                <el-option
                  v-for="item in selectedOptionsData1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <!-- 搜索区域按钮-查询,重置 -->
          <el-row class="search-button">
            <el-form-item>
              <el-button-group>
                <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
              </el-button-group>
            </el-form-item>
          </el-row>
          <!-- 导出 -->
          <el-row class="t_r">
            <el-form-item>
              <el-button-group>
                <el-button type="primary" size="small" @click="excelDownLoad()">导出</el-button>
              </el-button-group>
            </el-form-item>
          </el-row>
          <!-- 表格数据部分 -->
          <div class="table-wrap">
            <jic-table
              :tableList="tableList"
              :tableHeaderList="tableHeaderList"
              :totalSize="totalSize"
              :showOperation="false"
              :showBatchDelete="false"
              :showSelection="false"
              @findPage="findPage"
              @handleSizeChange="handleSizeChange"
              @handlePageChange="handlePageChange"
              ref="jicTable"
            ></jic-table>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";
import { exportExcel } from "@/utils/excel";
//二.数据输出区
export default {
  //2.1 注册组件
  components: {
    jicTable
  },

  //2.2 数据初始化区
  data() {
    return {
      selections: [],
      selectedOptionsData1: [], //商家列表数据
      size: "small",
      //2.2.1 公共数据初始化
      totalSize: 0, //// 返回数据总条数
      pageRequest: { pageIndex: 1, pageSize: 10 }, // 请求数据的参数
      tableList: [], // 表格列表数据
      searchSize: "mini",

      // 2.2.2 表格表头数据
      tableHeaderList: [
        { prop: "name", label: "仓库名称", minWidth: 100, formatter: null },
        { prop: "code", label: "仓库编码", minWidth: 100, formatter: null },
        { prop: "productId", label: "商家ID", minWidth: 100, formatter: null },
        {
          prop: "productCode",
          label: "商品编码",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "productName",
          label: "商品名称",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "unitName",
          label: "主计量单位",
          minWidth: 100,
          formatter: null
        },
        { prop: "total", label: "实际库存", minWidth: 100, formatter: null },
        { prop: "block", label: "冻结库存", minWidth: 100, formatter: null },
        {
          prop: "available",
          label: "剩余库存",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "updateTime",
          label: "最后更新时间",
          minWidth: 100,
          formatter: null
        }
      ],
      searchFilters: {
        name: null,
        type: 1,
        status: null,
        productName: null,
        delete_flag: 0,
        totalMin: null,
        totalMax: null,
        availableMin: null,
        availableMax: null
      },
      operation: false,
      dialogVisible: false
    };
  },

  //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
  mounted() {
    this.findPage();
    let this_ = this;
    this.utils.request.queryMerchantListOther({}, function(res) {
      if (res.code === "0000") {
        this_.selectedOptionsData1 = res.data;
      }
    });
  },

  methods: {
    findPage(pageNum) {
      // 传过滤器的参数
      let this_ = this;
      if (this_.searchFilters === undefined || this_.searchFilters === null) {
        this_.searchFilters = { type: 2 };
      }
      this_.searchFilters.type = 2;
      this_.searchFilters.pageNum =
        pageNum === null || pageNum === undefined
          ? this.pageRequest.pageNum
          : pageNum;
      this_.searchFilters.pageSize = this.pageRequest.pageSize;
      this.utils.request.listMStoreStock(this_.searchFilters, function(res) {
        if (res.code === "0000") {
          this_.tableList = res.data.rows;
          this_.totalSize = Number(res.data.total);
        } else {
          this_.tableList = [];
          this_.totalSize = 0;
        }
      });
    },

    resetForm() {
      this.searchFilters = {};
      this.findPage(null);
    },

    handleSizeChange(params) {
      this.pageRequest.pageSize = params.size;
      this.findPage();
    },

    handlePageChange(params) {
      this.pageRequest.pageNum = params.number;
      this.findPage();
    },

    excelDownLoad() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let this_ = this;
          let fileName = "实体库存查询Excel";
          if (this_.filters === undefined || this_.filters === null) {
            this_.filters = {};
          }
          this_.filters.pageNum = this.pageRequest.pageIndex;
          this_.filters.pageSize = Number.MAX_SAFE_INTEGER;

          this.utils.request.listMStoreStock(this_.searchFilters, function(
            res
          ) {
            if (res.code === "0000" && res.data.rows.length < 10000) {
              this_.tableList = res.data.rows;
              this_.totalSize = Number(res.data.total);
            } else {
              this_.$message({
                message: "没有数据或者数据量超过1万笔,请添加筛选条件后重试",
                type: "error"
              });
            }
          });

          exportExcel(this_.tableList, this.tableHeaderList, fileName);
          this_.findPage(null);
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }
}

.text-align{
  text-align: center !important;
}
.search-button{
  .el-form-item{
    margin-bottom: 0px !important;
  }
}
.t_r{
  .el-form-item{
    margin-bottom: 0px;
  }
}
</style>
